import React, {Component} from 'react';
import {connect} from '../../utils/decorator';
import {Form, Input, Row, Col, Button, Radio, message} from 'antd';
import Back from '../../components/Back';
import Logout from '../../components/Logout';
import style from '../Login/style.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
}

const urlMatch = /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i

@connect
@Form.create()
class Setting extends Component {

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                const _domain = localStorage.getItem('domain');
                let {domain} = values;
                if(!/\/$/.test(domain)){
                    values.domain += '/'
                }
                for(let i in values){
                    localStorage.setItem(i, values[i])
                }
                if(_domain !== values.domain){
                    location.hash = '/login';
                    message.success('设置成功，请重新登录')
                }
                else{
                    message.success('设置成功')
                }
            }
        })
    }

    validateDomain = (rule, value, callback) => {
        if(value && !urlMatch.test(value)) {
            callback('域名格式无效')
        }
        else{
            callback()
        }
    }

    render(){
        const {getFieldDecorator} = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} className={style.form}>
                <Row className={style.top} type="flex" justify="space-between">
                    <Col>
                        <Back />
                    </Col>
                    <Col>
                        <Logout />
                    </Col>
                </Row>
                <div className={style.head}>
                    <h3>系统设置</h3>
                </div>
                <FormItem 
                    {...formItemLayout}
                    label="域名">
                    {getFieldDecorator('domain', {
                        rules:[{
                            required:true, 
                            message:'请输入域名' 
                        }, {
                            validator:this.validateDomain
                        }],
                        initialValue:localStorage.getItem('domain')
                    })(
                        <Input autoComplete="off" placeholder="以https://或者http://开头" />
                    )}
                </FormItem>
                <FormItem 
                    {...formItemLayout}
                    label="登录网页">
                    {getFieldDecorator('website', {
                        rules:[{
                            required:true, 
                            message:'请选择登录网页' 
                        }],
                        initialValue:localStorage.getItem('website')
                    })(
                        <RadioGroup>
                            <Radio value={'1'}>代账</Radio>
                            <Radio value={'2'}>记账</Radio>
                        </RadioGroup>
                    )}
                </FormItem>
                <div>
                    <Button type="primary" htmlType="submit" block>
                        保存
                    </Button>
                </div>
            </Form>
        )
    }
}

export default Setting